<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <!--{include file='comm/header.tpl'}-->
    <!--{include file='comm/comm_cal.tpl'}-->
    <title>微信互动活动<!--{if $promotionID}-->修改<!--{else}-->新增<!--{/if}--></title>
</head>
<body>

<style>

.comm_content table tr {
        height: 30px;
    }

.comm_content{
    padding:10px;
}

#addSet{
    border-collapse: collapse;
    border-spacing: 0;
    width:100%;
    margin-top: 10px;
}

#addSet tr td{
    border: 1px solid #CCCCCC;
    padding: 0 3px;
    width:128px;
}

#addBox tr th{
    border-collapse: collapse;
    background-color: #EAEAEA;
    border: 1px solid #CCCCCC;
    height:28px;
    text-align: center;
}

#addBox tr td{
    border: 1px solid #CCCCCC;
    padding:3px;
}


</style>

<div style="width:100%;">

    <div class="items clearfix">

        <h2 class="tal">正在操作：微信互动活动<!--{if $promotionID}-->修改<!--{else}-->新增<!--{/if}--></h2>

        <div class="items2">

            <form id="set_form">

                <table>
                    <tbody>

                    <tr>
                        <td class="tar" width="150">标题：</td>
                        <td width="*">
                            <div>
                                <input name="promotionName" id="promotionName" type="text" value="<!--{$promotion[0].promotionName}-->">
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td class="tar" width="150">类型：</td>
                        <td width="*">
                            <div>
                                <select name="promotionType" id="promotionType">
                                    <option value="">请选择</option>
                                    <option <!--{if $promotion[0].promotionType == 1}-->selected="selected"<!--{/if}--> value="1">刮刮卡</option>
                                    <option <!--{if $promotion[0].promotionType == 2}-->selected="selected"<!--{/if}--> value="2">摇一摇</option>
                                    <option <!--{if $promotion[0].promotionType == 3}-->selected="selected"<!--{/if}--> value="3">大转盘</option>
                                    <option <!--{if $promotion[0].promotionType == 4}-->selected="selected"<!--{/if}--> value="4">盖高楼</option>
                                    <option <!--{if $promotion[0].promotionType == 5}-->selected="selected"<!--{/if}--> value="5">接红包</option>
                                </select>
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td class="tar" width="150">有效期：</td>
                        <td width="*">
                            <div>
                                <input id="startDate" type="text" readonly="" size="10" value="<!--{$promotion[0].startDate}-->" name="startDate">
                                ～
                                <input id="endDate" type="text" readonly="" value="<!--{$promotion[0].endDate}-->" size="10" name="endDate">
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td class="tar" width="150">每日次数：</td>
                        <td width="*">
                            <div>
                                <input name="participateTime" id="participateTime" type="text" value="<!--{$promotion[0].participateTime}-->">
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td class="tar" width="150">领奖结束日期：</td>
                        <td width="*">
                            <div>
                                <input name="acceptEndDate" id="acceptEndDate" type="text" value="<!--{$promotion[0].acceptEndDate}-->">
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td class="tar" width="150">使用状态：</td>
                        <td width="*">
                            <div>
                                <!--{if $promotionID}-->

                                <input  type="radio" name="useFlg" <!--{if $promotion[0].useFlg == 1}-->checked="checked"<!--{/if}--> value="1">&nbsp;启用&nbsp;
                                <input type="radio" name="useFlg"  <!--{if $promotion[0].useFlg == 0}-->checked="checked"<!--{/if}-->  value="0">&nbsp;禁用

                                <!--{else}-->

                                <input  type="radio" name="useFlg" checked="checked" value="1">&nbsp;启用&nbsp;
                                <input type="radio" name="useFlg"  value="0">&nbsp;禁用

                                <!--{/if}-->

                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td class="tar" width="150">积分换次数：</td>
                        <td width="*">
                            <div>

                                <!--{if $promotionID}-->

                                <input onclick="scratch.actionShow()" type="radio" name="isPointsExchange" <!--{if $promotion[0].isPointsExchange == 1}-->checked="checked"<!--{/if}-->   value="1">&nbsp;是&nbsp;
                                <input onclick = "scratch.actionHide()" type="radio" name="isPointsExchange" <!--{if $promotion[0].isPointsExchange == 0}-->checked="checked"<!--{/if}-->  value="0">&nbsp;否

                                <!--{else}-->

                                <input onclick="scratch.actionShow()" type="radio" name="isPointsExchange" value="1">&nbsp;是&nbsp;
                                <input onclick = "scratch.actionHide()" type="radio" name="isPointsExchange" checked="checked" value="0">&nbsp;否

                                <!--{/if}-->

                            </div>
                        </td>
                    </tr>
                    <tr id = "maxNum" style="display:none">
                        <td class="tar" width="150">最大次数：</td>
                        <td width="*">
                            <div>
                                <input name="maxExchangeTime" id="maxExchangeTime" type="text"  value="<!--{$promotion[0].maxExchangeTime}-->">
                            </div>
                        </td>
                    </tr>
                    <tr id="integral" style="display:none">
                        <td class="tar" width="150">积分：</td>
                        <td width="*">
                            <div>
                                <input name="point" id="point" type="text"  value="<!--{$promotion[0].points}-->">
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td class="tar" width="150">奖项设置：</td>
                        <td width="*">
                            <div>
                                <input id="ggkname" style="opacity:0.5;width:100px" type="text" value="奖项名称">
                                <input id="awardsRatio" style="opacity:0.5;width:60px" type="text"  value="概率"> /
                                <select id="awardsRate">
                                    <option value="100">100</option>
                                    <option value="1000">1000</option>
                                    <option value="10000">10000</option>
                                </select>
                                <input id="djcp" style="opacity:0.5;width:100px" type="text"  value="奖品名称">
                                <input id="pnum" style="opacity:0.5;width:80px" type="text"  value="奖品数量">
                                <input class="btn" type="button" onclick="scratch.addLine()" value="添加">
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td>&nbsp;</td>
                        <td>
                            <div id = 'selectmer' style="width:550px;margin-top: 18px;">
                                <!--<table id="flex" style="display:none"></table>-->
                            </div>
                        </td>
                    </tr>
                    </tbody>
                </table>

            </form>
        </div>
    </div>

    <div class="bottom_fixbox">
        <div class="rectbox tac">
            <input type="hidden" value="" name="dataCache" id="dataCache">
            <input type="button" value="保存" onclick="scratch.check();" class="btn">&nbsp;&nbsp;&nbsp;
            <input type="button" value="关闭" onclick="E.closeWindows();" class="btn">
        </div>
    </div>

    <!--{include file='comm/footer.tpl'}-->

</div>

<script type="text/javascript">

var html_title = '';

    //微信互动活动列表
    $("#flex").flexigrid({
        dataType: "json",
        colModel : [
        {display: "奖项名称", width : 120, align:'left'},
        {display: "概率", width : 60, align: 'left'},
        {display: "奖品名称", width:130, align: 'left'},
        {display: "奖品数量", width:1000, align: 'left'}
    ],
            buttons : [
        {name: "删除", bclass: "delete", onpress : "scratch.scratchDelete"}
    ],
            showTableToggleBtn: true
    });

    cal.manageFields("startDate", "startDate", "%Y-%m-%d");
    cal.manageFields("endDate", "endDate", "%Y-%m-%d");
    cal.manageFields("acceptEndDate", "acceptEndDate", "%Y-%m-%d");

    var mark = 0;

    var datacache = new Array();

    var table_obj = {'page' : '', 'total' : '', 'rows' : []};

    $(document).ready(function(){
        <!--{if $promotion[0].isPointsExchange == 1}-->
            scratch.actionShow();
        <!--{/if}-->
        <!--{if $promotion[0].isPointsExchange == 0}-->
            $('#maxExchangeTime').val('0');
            $('#point').val('0');
        <!--{/if}-->
        $('.flexigrid').css('display','none');
        <!--{if $promotionID}-->
        scratch.editSet();
        <!--{/if}-->
    })


    $('#ggkname').on('focus', function() {
        var ggkname = $(this).val();
        if (ggkname == '奖项名称') {
            $(this).val('');
        }
    }).on('blur', function() {
                var ggkname = $(this).val();
                if (ggkname == '') {
                    $(this).val('奖项名称');
                    $(this).css('opacity',0.5);
                }else{
                    $(this).css('opacity',1);
                }
            });

    $('#awardsRatio').on('focus', function() {
        var ggkname = $(this).val();
        if (ggkname == '概率') {
            $(this).val('');
        }
    }).on('blur', function() {
                var ggkname = $(this).val();
                if (ggkname == '') {
                    $(this).val('概率');
                    $(this).css('opacity',0.5);
                }else{
                    $(this).css('opacity',1);
                }
            });

    $('#djcp').on('focus', function() {
        var djcp = $(this).val();
        if (djcp == '奖品名称') {
            $(this).val('');
        }
    }).on('blur', function() {
                var djcp = $(this).val();
                if (djcp == '') {
                    $(this).val('奖品名称');
                    $(this).css('opacity',0.5);
                }else{
                    $(this).css('opacity',1);
                }
            });


    $('#pnum').on('focus', function() {
        var pnum = $(this).val();
        if (pnum == '奖品数量') {
            $(this).val('');
        }
    }).on('blur', function() {
                var pnum = $(this).val();
                if (pnum == '') {
                    $(this).val('奖品数量');
                    $(this).css('opacity',0.5);
                }else{
                    $(this).css('opacity',1);
                }
            });

    var scratch = {

        editSet: function(){

            <!--{foreach from = $promotion_detail item=val}-->
            mark++;
            table_obj.rows.push({'id':mark,'cell':['<!--{$val.awardsName}-->','<!--{$val.awardsRatio}-->/<!--{$val.awardsRate}-->','<!--{$val.prize}-->','<!--{$val.prizeNum}-->']});

            <!--{/foreach}-->
            //$('.flexigrid').css('display','');

            //$("#flex").flexAddData(table_obj);

            var html = '<table id="addBox" style="border-collapse: collapse;width:90%">' +
                    '<tr>' +
                    '<th style="width:20%">' +
                    '奖项名称' +
                    '</th>' +
                    '<th style="width:20%">' +
                    '概率' +
                    '</th>' +

                    '<th style="width:20%">' +
                    '奖品名称' +
                    '</th>' +

                    '<th style="width:20%">' +
                    '奖品数量' +
                    '</th>' +

                    '<th style="width:20%">' +
                    '操作' +
                    '</th>' +

                    '</tr>';
            //$("#flex").flexAddData(table_obj);

            $.each(table_obj.rows,function(k,v){
                html += '<tr>' +
                        '<td>' +
                        v.cell[0] +
                        '</td>' +
                        '<td>' +
                        v.cell[1] +
                        '</td>' +
                        '<td>' +
                        v.cell[2] +
                        '</td>' +
                        '<td>' +
                        v.cell[3] +
                        '</td>' +
                        '<td align="center">' +
                        '<a onclick="scratch.scratchDelete('+ v.id+')">删除</a>' +
                        '</td>' +
                        '</tr>';
            })

            $('#selectmer').html(html);

        },

        addLine: function(){

            var message = '';

            if(E.isEmpty($('#ggkname').val()) || $('#ggkname').val() == '奖项名称' )
                message += '请填写奖项名称<br/>';

            if(!E.isInt($('#awardsRatio').val()))
                message += '请填写正确概率<br/>';

            if(parseFloat($('#awardsRatio').val())/parseInt($('#awardsRate').val())>1)
                message += '概率不能大于100%<br/>';

            if(E.isEmpty($('#djcp').val()) || $('#djcp').val() == '奖品名称' )
                message += '请填写奖品名称<br/>';

            if(!E.isNum($('#pnum').val()))
                message += '请填写正确奖品数量<br/>';

            if(message != ''){
                E.alert(message);
                return false;
            }

            mark++;

            $('.flexigrid').css('display','');

            var ggkname = $('#ggkname').val();
            var awardsRatio = $('#awardsRatio').val();
            var awardsRate = $('#awardsRate').val();
            var djcp = $('#djcp').val();
            var pnum = $('#pnum').val();

            var lineValue = [ggkname,awardsRatio+'/'+awardsRate,djcp,pnum];

            table_obj.rows.push({'id':mark,'cell':lineValue});

            var html = '<table id="addBox" style="border-collapse: collapse;width:90%">' +
                    '<tr>' +
                    '<th style="width:20%">' +
                    '奖项名称' +
                    '</th>' +
                    '<th style="width:20%">' +
                    '概率' +
                    '</th>' +

                    '<th style="width:20%">' +
                    '奖品名称' +
                    '</th>' +

                    '<th style="width:20%">' +
                    '奖品数量' +
                    '</th>' +

                    '<th style="width:20%">' +
                    '操作' +
                    '</th>' +

                    '</tr>';
            //$("#flex").flexAddData(table_obj);

            $.each(table_obj.rows,function(k,v){
                html += '<tr>' +
                        '<td>' +
                        v.cell[0] +
                        '</td>' +
                        '<td>' +
                        v.cell[1] +
                        '</td>' +
                        '<td>' +
                        v.cell[2] +
                        '</td>' +
                        '<td>' +
                        v.cell[3] +
                        '</td>' +
                        '<td align="center">' +
                        '<a onclick="scratch.scratchDelete('+ v.id+')">删除</a>' +
                        '</td>' +
                        '</tr>';
            })

            $('#selectmer').html(html);

        },

        actionShow: function(){
            $('#maxNum').css("display","");
            $('#integral').css("display","");
        },

        actionHide: function(){
            $('#maxNum').css("display","none");
            $('#integral').css("display","none");
        },

        showNormal: function(ythis){
            $(ythis).val('');
            $(ythis).css('opacity',1);
        },
        scratchDelete: function(id){

            //删除行对象数据
            $.each(table_obj.rows,function(k,v){
                if(v!=undefined&& v.id == id){
                    table_obj.rows.splice(k, 1);
                }
            });

            var html = '<table id="addBox" style="border-collapse: collapse;width:90%">' +
                    '<tr>' +
                    '<th style="width:20%">' +
                    '奖项名称' +
                    '</th>' +
                    '<th style="width:20%">' +
                    '概率' +
                    '</th>' +

                    '<th style="width:20%">' +
                    '奖品名称' +
                    '</th>' +

                    '<th style="width:20%">' +
                    '奖品数量' +
                    '</th>' +

                    '<th style="width:20%">' +
                    '操作' +
                    '</th>' +

                    '</tr>';
            //$("#flex").flexAddData(table_obj);

            $.each(table_obj.rows,function(k,v){
                html += '<tr>' +
                        '<td>' +
                        v.cell[0] +
                        '</td>' +
                        '<td>' +
                        v.cell[1] +
                        '</td>' +
                        '<td>' +
                        v.cell[2] +
                        '</td>' +
                        '<td>' +
                        v.cell[3] +
                        '</td>' +
                        '<td align="center">' +
                        '<a onclick="scratch.scratchDelete('+ v.id+')">删除</a>' +
                        '</td>' +
                        '</tr>';
            })

            $('#selectmer').html(html);


        },


        check: function(){

           var datacacheCop = new Array();

            var addRate = 0;

            $.each(table_obj.rows,function(k,v){
                var addRateArr = new Array();
                datacacheCop.push(v.cell);
                addRateArr = v.cell['1'].split('/');
                addRate += (parseInt(addRateArr[0])/parseInt(addRateArr[1]));
            })

            if(addRate>1){
                E.alert('奖项概率之和不能大于1');
                return false;
            }

            this.gloAddRate = addRate;

            datacache = datacacheCop;

            $msg = '';
            if(E.isEmpty($('#promotionName').val()))
                $msg += '标题不能为空<br/>';
            if(E.isEmpty($('#promotionType').val()))
                $msg += '请选择类型<br/>';
            if(E.isEmpty($('#startDate').val()))
                $msg += '请选择开始时间<br/>';
            if(E.isEmpty($('#endDate').val()))
                $msg += '请选择结束时间<br/>';
            if($('#endDate').val()<$('#startDate').val())
                $msg += "开始时间不能大于结束时间<br/>";
            if(E.isEmpty($('#participateTime').val()) || !E.isInt($('#participateTime').val()))
                $msg += '请输入正确的每日次数<br/>';
            if(E.isEmpty($('#acceptEndDate').val()))
                $msg += '请选择领奖结束日期<br/>';

            if($('input[name="isPointsExchange"]').get(0).checked){

                if(!E.isInt($('#maxExchangeTime').val()))
                    $msg += '请输入正确的最大次数<br/>';
                if(!E.isNum($('#point').val()))
                    $msg += '请输入正确的积分<br/>';

            }

            if(datacache.length == 0)
                $msg += '请添加奖项设置<br/>';

            if(this.gloAddRate>100)
                $msg += '奖项设置概率之和不能大于100%<br/>';

            if($msg != ''){
                E.alert($msg);
                return false;
            }

            E.confirm("您确认要保存该微信互动活动么？", "scratch.saveScratch");
        },

        saveScratch: function(){

            E.loadding.open("正在保存微信互动活动，请稍候...");

            var dt = E.getFormValues('set_form');
            var url = '';
            <!--{if $promotionID}-->
                url = '/invokingAjax-backend/promotion/scratch.ajax?operFlg=3&promotionID=<!--{$promotionID}-->';//编辑
            <!--{else}-->
                url = '/invokingAjax-backend/promotion/scratch.ajax?operFlg=2';//保存
            <!--{/if}-->


            E.ajax_post({
                url: url,
                data: {'dt':dt,'datacache':datacache,'addRate':this.gloAddRate},
                call: "scratch.result"
            });
        },

        result: function(o){
            E.loadding.close();
            if (o.code == 200) {
                E.alert(o.message,2,'scratch.closeLoad');

            } else {
                E.alert(o.message);
            }
        },
        closeLoad: function(){
            E.opener("scratch.load");
            <!--{if $promotionID}-->
            E.closeWindows();
            <!--{/if}-->
        }


    }

</script>

</body>
</html>